<!--
 * @Description: 
 * @Author: 赵大壮
 * @Date: 2021-12-08 14:10:35
 * @LastEditTime: 2022-05-23 18:16:03
 * @LastEditors: 赵大壮
-->
<template>
  <div class="flex flex-row items-center justify-center">
    <div
      class="
        pl-w10
        pr-w10
        pt-w5
        pb-w5
        flex flex-row
        items-center
        cursor-pointer
      "
      @click="selectImg"
    >
      <!-- <i class="el-icon-upload2 text-blue-400"></i>
      <div class="text-f12">{{ titleName }}</div> -->
      <el-button type="primary" icon="el-icon-edit" class="ml-w10 mt-w10" circle></el-button>
      <input
        type="file"
        v-show="false"
        ref="fileRef"
        accept="image/*"
        @change="selecte_img"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

@Component
export default class UiUploadImgBtn extends Vue {
  @Prop() type: any;
  @Prop() index: any;
  @Prop() url: any;
  titleName = "";
  name = "";
  base64 = "";
  path = "";

  created() {}

  mounted() {}

  beforeDestroy() {}

  selectImg() {
    (this.$refs.fileRef as any).dispatchEvent(new MouseEvent("click"));
  }

  // changeTitle(title: string) {
  //   this.titleName = title;
  // }


  @Watch("url")
  watchValue(url: any, oldValue: string) {
    if (url != "") {
      this.path = url;
    }
  }

  /**
   * 选择图片返回
   */
  selecte_img(image: any) {
    var file = image.path[0].files[0];
    console.log(file)
    var that = this;
    var oFReader = new FileReader();
    oFReader.readAsDataURL(file);
    oFReader.onloadend = function (oFRevent) {
      var src = oFRevent.target!.result;
      that.path = src as string;
      that.base64 = oFReader.result as string;
      that.name = file.name as string;
      var imageData = {
        name: that.name,
        path: that.path,
        base64: that.base64,
        type: that.type,
        index: that.index,
      };
      that.$emit("selecte_img", imageData);
    };
  }
}
</script>
<style lang="less" scoped>
</style>
